<template>
<teleport to="body">
    <transition name="fade" appear>
        <div v-show="visible" :class="['e-popup', isLoading?'is-loading':'']"
            :style="{
                top: `${parseInt(top)}px`,
                left: `${parseInt(left)}px`,
                right: `${parseInt(right)}px`,
                bottom: `${parseInt(bottom)}px`,
            }">
            <svg v-if="isLoading" viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
            <template v-else>
                <span class="h-s">
                    <span>{{$const.langs.find(l=>l.id === lang)?.text?.slice?.(0, 1)}}</span>
                    <span>{{contentAfterTranslate}}</span>
                </span>
            </template>
        </div>
    </transition>
</teleport>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import $const from '@s/const'
import m from '@s/m'

let props = defineProps({
    top: [Number, String],
    left: [Number, String],
    right: [Number, String],
    bottom: [Number, String],
    content: String,
    lang: String,
    visible: Boolean,
})

let emit = defineEmits(['update:visible', 'update:contentAfterTranslate'])

let isLoading = ref(false)
let contentAfterTranslate = ref('')
watch(contentAfterTranslate, val=>emit('update:contentAfterTranslate', val))
watch(()=>props.content, val=>{
    if(val){
        isLoading.value = true
        m.background('translate', {
            to: props.lang, 
            q: val
        }).finally(()=>isLoading.value = false).then(data=>{
            contentAfterTranslate.value = data
        })
    }
}, {immediate: true})

let handleCaptureClickGlobal = e=>{
    let hasPopUp = false
    for(let el of e.path){
        if(el.classList?.contains('e-popup')){
            hasPopUp = true
        }
    }
    if(!hasPopUp){
        emit('update:visible', false)
    }
}
onMounted(()=>{
    document.querySelector('body').addEventListener('click', handleCaptureClickGlobal, {capture: true})
})
onBeforeUnmount(()=>{
    document.querySelector('body').removeEventListener('click', handleCaptureClickGlobal)
})
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
<style lang="scss">
@import '@/styles/block.scss';

.e-popup{
    position: fixed;
    z-index: 9999;
    
    letter-spacing: 1px;
    font-size: 14px;
    color: whitesmoke;
    background: rgba(0, 0, 0, .85);
    border-radius: 5px;

    display: flex;
    align-items: center;

    padding: 4px 12px;

    transition: padding .3s, opacity .3s;
    &.is-loading{
        border-radius: 100%;
        padding: 6px;
    }
}

.circular {
    height: 16px;
    width: 16px;
    animation: loading-rotate 2s linear infinite;

    .path{
        stroke: #ececec;
        stroke-width: 6px;
        stroke-linecap: round;
        animation:dash 1.5s ease-in-out infinite;
    }
}
@keyframes loading-rotate {
    to {
        transform:rotate(1turn)
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset:0
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset:-35
    }

    to {
        stroke-dasharray: 90, 150;
        stroke-dashoffset:-124
    }
}
</style>